<template>
    <el-card>
        <el-page-header icon="" title="用户管理">
            <template #content>
                <span class="text-large font-600 mr-3"> 用户列表 </span>
            </template>
            <el-table :data="tableData" height="600px" style="width: 100%">
                <el-table-column prop="username" fixed label="用户名" width="180" />
                <el-table-column prop="avatar" label="头像" width="180">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <el-avatar :size="50"
                                :src="scope.row.avatar ? scope.row.avatar : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="role" label="身份" width="180">
                    <template #default="scope">
                        <el-tag :type="scope.row.role == 1 ? 'primary' : 'success'">{{ scope.row.role ==
                                1 ? "管理员" : "编辑"
                        }}</el-tag>
                        <!-- <el-tag type="success" v-else>马仔</el-tag> -->
                    </template>
                </el-table-column>
                <el-table-column prop="gender" label="性别">
                    <template #default="scope">
                        <el-icon size="20px" color="#409eff" v-if="scope.row.gender == 1">
                            <Male />
                        </el-icon>
                        <el-icon size="20px" color="#67c23a" v-else-if="scope.row.gender == 2">
                            <Female />
                        </el-icon>
                        <el-tag type="danger" v-else>隐藏</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="180">
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.row)">
                            编辑
                        </el-button>
                        <DeleteButton :row="scope.row" @handleDelete="handleDelete" />
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="prev, pager, next" :current-page="params.currentPage" :page-size="params.pageSize"
                @current-change="handleChange" :total="total" />
        </el-page-header>
    </el-card>
</template>

<script setup>
import axios from 'axios';
import { Female, Male } from "@element-plus/icons-vue"
import { onMounted, reactive, ref } from 'vue';
import DeleteButton from "@/components/delete/DeleteButton.vue"
import { ElMessage } from 'element-plus'


const tableData = ref([])
const total = ref(0)

const params = reactive({
    pageSize: 10,
    currentPage: 1
})

const handleChange = (value) => {
    // console.log(value);
    params.currentPage = value
    handleUserList()
}

const handleEdit = (row) => {
    console.log(row);
}

const handleDelete = (row) => {
    console.log(row);
    axios.get("/api/admin/user/delete/" + row._id).then(res => {
        console.log(res);
        if (res.data.code == 200) {
            ElMessage({
                type: 'success',
                message: "删除成功",
            })
            handleUserList()
        }
    })
}

const handleUserList = () => {
    axios.get("/api/admin/user/list", { params }).then(res => {
        // console.log(res);
        if (res.data.code == 200) {
            tableData.value = res.data.data.data
            total.value = res.data.data.total
        }
    })
}

onMounted(() => {
    handleUserList()
});

</script>

<style lang="scss" scoped>
::v-deep.el-pagination {
    align-items: center;
}

.example-pagination-block+.example-pagination-block {
    margin-top: 10px;
}

.example-pagination-block .example-demonstration {
    margin-bottom: 16px;
}
</style>